<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport"/>
    <title>Intro to layers | Sample | ArcGIS API for JavaScript 4.21</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #layerToggle {
            top: 20px;
            right: 20px;
            position: absolute;
            z-index: 99;
            background-color: white;
            border-radius: 8px;
            padding: 10px;
            opacity: 0.75;
        }
    </style>
    <link href="https://js.arcgis.com/4.21/esri/themes/light/main.css" rel="stylesheet"/>
    <script src="https://js.arcgis.com/4.21/"></script>
    <script>
        require(["esri/widgets/BasemapToggle","esri/Camera", "esri/tasks/Locator", "esri/Map", "esri/views/SceneView", "esri/layers/TileLayer"],
            (BasemapToggle,Camera, Locator, Map, SceneView, TileLayer) => {
            //使用世界地理编码服务创建一个定位器任务
            const locatorTask = new Locator({
                url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"
            });


            const transportationLayer = new TileLayer({
                url: "https://server.arcgisonline.com/arcgis/rest/services/Reference/World_Transportation/MapServer",
                id: "streets",//唯一标识层
                opacity: 0.7,//不同明度
            });

            const housingLayer = new TileLayer({
                url: "https://tiles.arcgis.com/tiles/nGt4QxSblgDfeJn9/arcgis/rest/services/New_York_Housing_Density/MapServer",
                id: "ny-housing"
            });


            const map = new Map({
                basemap: "hybrid",
                layers: [housingLayer],//图层可以作为组合添加到地图的构造函数中
            });

            map.layers.add(transportationLayer);

            const view = new SceneView({
                container: "viewDiv",
                map: map
            });

            const streetsLayerToggle = document.getElementById("streetsLayer");

            //添加监听事件
            streetsLayerToggle.addEventListener("change", () => {
                transportationLayer.visible = streetsLayerToggle.checked;//设置图层的可见性
            });

            /*当图层创建时*/
            view.on("layerview-create", (event) => {
                if (event.layer.id === "ny-housing") {
                    console.log("为纽约住房密度创建的图层", event.layerView);
                }
                if (event.layer.id === "streets") {
                    console.log("创建街道的图层图！", event.layerView);
                }
            });

            let camera = new Camera({
                fov: 55,//较小的 fov 角模拟远摄镜头放大，而较大的 fov 角模拟鱼眼镜头缩小。默认角度为 55 度
                heading: 0,//当北方位于屏幕顶部时，航向为零, 当值为180的时候,南方在屏幕顶部,值在0-360之间
                position: [100.3, 33.9, 2000000],//相机的位置,经度 纬度 海拔高度
                tilt: 45,//垂直向下看表面时倾斜度为零，当相机平行于表面看时倾斜度为 90 度,平行于地面角度为180
            });

            view.when(() => {
                view.goTo(housingLayer.fullExtent);//housingLayer.fullExtent:地图服务定义的层的完整范围
                //view.goTo(camera);
            });

            view.popup.autoCloseEnabled = true;//设置当视图摄像机或视点更改时，true为自动关闭弹出窗口,false为不关闭窗口

            //右键点击,打开弹框
            view.on("click", (event) => {
                //获取地图点的经纬度坐标
                let lat = Math.round(event.mapPoint.latitude * 1000) / 1000;
                let lon = Math.round(event.mapPoint.longitude * 1000) / 1000;

                view.popup.open({//在给定位置打开弹出窗口
                    title: "点击的位置为[" + lat + "," + lon + "]",
                    content: "点击的位置为[" + lat + "," + lon + "],您肯定没去过",
                    location: event.mapPoint,
                });

                locatorTask.locationToAddress({//将地点转为地址放在content中,上面设置的content将失效
                    location: event.mapPoint
                }).then((response) => {
                    // 如果成功找到地址，则将其显示在弹出窗口的内容中
                    view.popup.content = response.address;
                }).catch(() => {
                    //如果承诺失败且未找到结果，则显示通用消息
                    view.popup.content = "找不到此位置的地址";
                })
            });


            //添加小部件
            let toggle = new BasemapToggle({
                view:view,
                nextBasemap:"streets-vector"
            });

            view.ui.add(toggle);
        });
    </script>


</head>
<body>
<div id="viewDiv"></div>
<span class="esri-widget" id="layerToggle"> <input checked id="streetsLayer" type="checkbox"/> Transportation </span>
</body>
</html>
